<template>
  <div class="box">
    <h1>我是父亲曹操: {{ money }}</h1>
    <button @click="handler">找我的儿子曹植借10元</button>
    <hr>
    <Son ref="son"></Son>
    <dau></dau>
  </div>
</template>

<script setup lang="ts">
// ref：可以获取真实的DOM节点，可以获取到子组件实例VC
// $parent:可以在子组件内部获取到父组件的实例
import Son from './son.vue'
import dau from './daughter.vue'
import { ref } from "vue";
let money = ref(100000000);

// 获取子组件的实例
let son = ref()

// 父组件内部按钮点击回调
const handler = ()=>{
  money.value+=10
  // console.log(son.value);
  // 儿子钱数减去10
  son.value.money -= 10
  son.value.fly()
}
// 对外暴露
defineExpose({
  money
})
</script>
<style scoped lang="less">
.box {
  width: 100vw;
  height: 500px;
  background: skyblue;
}
</style>